<template>

	<view class="container">
		<view class="page">
			<image class="head_icon" :src="user.headicon"></image>
		</view>
		<view>
			<uni-forms ref="form1" :model="userInfo" :rules="myrules">
				<uni-forms-item label="" name="username">
					<uni-easyinput placeholder="请输入用户名" @iconClick="iconClick" suffixIcon="camera-filled"
						v-model="userInfo.username" prefixIcon="contact-filled" />
				</uni-forms-item>
				<uni-forms-item label="" name="password">
					<uni-easyinput placeholder="请输入密码" prefixIcon="locked" type="password"
						v-model="userInfo.passeord" />
				</uni-forms-item>
				<uni-forms-item label="" name="">
					<button type="primary" :plain="true" :loading="false" @click="login">登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				user: {
					headicon: '/static/head_icon.png',
				},
				myrules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							minLength: 3,
							maxLength: 5,
							errorMessage: '长度不符合要求，要求在3-5个字符'
						}]
					},
					passeord: {}
				},
				userInfo: {
					username: '',
					passeord: ''
				}
			}
		},
		methods: {
			login1() {
				this.$refs.form1.validate()
			},
			login() {
				if (this.$refs.form1.validate() === true) {
					if (this.userInfo.username === 'tom' && this.userInfo.passeord === '123') {
						uni.showToast({
							title: '欢迎你' + this.userInfo.username,
							duration: 900000
						})
					} else {
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none'
						})
					}
				} else {
					return
				}
			},
			iconClick(e) {
				console.log(e);
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 10%;
	}

	.page {

		height: 110px;
	}

	.head_icon {
		height: 50px;
		width: 50px;
		margin-left: -40px;
		margin-bottom: 20px;
		border-radius: 100%;
		position: absolute;
		top: 10%
	}
</style>